<template>
  <van-row>
    <van-row style="overflow: auto;margin-bottom: 38px">
    <van-row class="item-banner">
      <img src="" class="item-img">
      <van-row  class="img-header pos">
        <van-icon name="arrow-left" size="34px" style="float: left" @click="back()"></van-icon>
        <van-icon name="share"  size="24px" style="float: right;top: 6px;right: 7px"></van-icon>
      </van-row>
      <van-row class="item-name pos">
        <h2>健身塑形</h2>
      </van-row>
      <van-row class="item-pop pos">
        <p>5555训练过</p>
      </van-row>
    </van-row>
    <van-row>
      <div class="swiper-container swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="">
            <div class="other">
                <h3>day 01</h3>
                <p>爵士舞</p>
            </div>
          </div>
        </div>
      </div>
    </van-row>
    <van-row class="item-price">
      <van-row class="price-con">
        <van-row class="con-top">
          <h2 price-name>苏醒系列3</h2>
          <p class="price">1111</p>
        </van-row>
        <van-row class="con-tar">
            <p>当前难度</p>
            <p>难度</p>
            <p>训练周期</p>
            <p>几次</p>
        </van-row>
      </van-row>

    </van-row>
    </van-row>
    <van-row class="price-btn">
      <van-button icon="comment-o" type="default" class="f-btn">888</van-button>
      <van-button icon="add-o" type="default" class="l-btn">加入训练计划</van-button>
    </van-row>
  </van-row>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import swiper from 'swiper';

  export default {
    name: 'item',
    methods:{
      back(){
        this.$router.go(-1)
      }
    },
    mounted() {
      new swiper('.swiper1', {
        slidesPerView: 'auto',
        freeModeMomentum: false,
        spaceBetween: 5,
        freeMode: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      });
    }
  }
</script>

<style scoped>
  .item-banner{
  position: relative;width: 100%;
}
.item-img{
  height: 209px;width: 100%;
}
.pos{position: absolute}
.item-price{}
.img-header{
 top:0;width: 100%;
}
  .item-name{
    top:144px;left: 13px;font-size: 18px;
  }
  .item-name h2{font-size: 18px}
  .item-pop{left: 13px;top: 179px}
  .swiper1{padding: 12px;height: 122px;border-bottom: 11px solid #eeeeee;}
  .swiper1 img{
    height: 70px;width: 108px;
  }
  .swiper1 .swiper-slide{
    width: 108px!important;
    height: 70px!important;
    background: red;
  }
  .other{
    padding-top: 16px;height: 36px;width: 108px;line-height: 16px;
  }
  .price-con{padding: 13px}
  .price-name{font-size: 14px;}
  .price{padding:  10px 0}
  .con-tar p{line-height: 17px}
  .price-btn{position: fixed;left: 0;bottom: 0;width: 100%;border-top: 1px solid #bbbbbb}
  .f-btn{width: 35%;float: left;display: block;border-radius: 0;height: 37px;line-height: 37px;border: 0}
  .l-btn{width: 65%;float: left;display: block;height: 37px;line-height: 37px;border: 0;border-left: 1px solid #bbbbbb}
</style>
